import { useState } from 'react'
function StudentInfoForm (props) {
  const addStudentInfo = e => {
    // 阻止默认表单提交事件，避免刷新页面
    e.preventDefault()
    // console.log('添加用户信息', e)
    const hobbies = filterCheckedValue(studentForm.hobbies)
    const student = JSON.parse(JSON.stringify(studentForm))
    props.handler({ ...student, hobbies })
  }

  // 过滤获取复选框选中值
  function filterCheckedValue (hobbies) {
    const tempHobbies = JSON.parse(JSON.stringify(hobbies))
    return tempHobbies
      .filter(hobby => hobby.isChecked)
      .map(hobby => hobby.value)
  }
  const [studentForm, setStudentForm] = useState({
    number: '',
    name: '',
    sex: '男',
    age: '',
    date: '',
    hobbies: [
      {
        id: 1,
        value: '足球',
        isChecked: true
      },
      {
        id: 2,
        value: '篮球',
        isChecked: false
      },
      {
        id: 3,
        value: '橄榄球',
        isChecked: false
      }
    ],
    subject: '大前端'
  })
  /**可处理以下表单类型：
   * 1，输入框，
   * 2，下拉框
   * 3，单选框
   * 4，日期选择
   */
  function onFormChange (e) {
    const name = e.target.name
    const value = e.target.value
    setStudentForm({
      ...studentForm,
      [name]: value
    })
    // console.log(studentForm)
  }
  // 复选框值变化
  function onCheckboxChange (e, i) {
    // e.preventDefault()
    const hobbies = JSON.parse(JSON.stringify(studentForm.hobbies))
    hobbies[i].isChecked = !hobbies[i].isChecked
    setStudentForm({ ...studentForm, hobbies })
    // console.log(studentForm.hobbies)
  }
  return (
    <div className='col-md-5'>
      <form>
        <div className='form-group'>
          <label>学号</label>
          <input
            type='number'
            name='number'
            value={studentForm.number}
            onChange={e => {
              onFormChange(e)
            }}
            className='form-control'
            placeholder='请输入学号'
          />
        </div>
        <div className='form-group'>
          <label>姓名</label>
          <input
            name='name'
            type='text'
            value={studentForm.name}
            onChange={e => {
              onFormChange(e)
            }}
            className='form-control'
            placeholder='请输入姓名'
          />
        </div>
        <div className='form-group'>
          <label>性别&nbsp;&nbsp;</label>
          <label className='checkbox-inline'>
            <input
              checked={studentForm.sex === '男'}
              onChange={e => {
                onFormChange(e)
              }}
              name='sex'
              type='radio'
              value='男'
            />
            男
          </label>
          <label className='checkbox-inline'>
            <input
              checked={studentForm.sex === '女'}
              onChange={e => {
                onFormChange(e)
              }}
              name='sex'
              type='radio'
              value='女'
            />
            女
          </label>
        </div>
        <div className='form-group'>
          <label>年龄</label>
          <input
            type='number'
            name='age'
            value={studentForm.age}
            onChange={e => {
              onFormChange(e)
            }}
            className='form-control'
            placeholder='请输入年龄'
          />
        </div>
        <div className='form-group'>
          <label>入学时间</label>
          <input
            value={studentForm.date}
            onChange={e => {
              onFormChange(e)
            }}
            name='date'
            className='form-control'
            type='date'
          />
        </div>
        <div className='form-group'>
          <label>爱好</label>
          {studentForm.hobbies.map((hobby, index) => {
            return (
              <div className='checkbox' key={hobby.id}>
                <label>
                  <input
                    name='hobbies'
                    type='checkbox'
                    checked={hobby.isChecked}
                    value={hobby.value}
                    onChange={e => {
                      onCheckboxChange(e, index)
                    }}
                  />
                  {hobby.value}
                </label>
              </div>
            )
          })}
          {/* <div className='checkbox'>
            <label>
              <input name="hobbies" type='checkbox' value='足球' /> 足球
            </label>
          </div>
          <div className='checkbox'>
            <label>
              <input name="hobbies" type='checkbox' value='篮球' /> 篮球
            </label>
          </div>
          <div className='checkbox'>
            <label>
              <input name="hobbies" type='checkbox' value='橄榄球' /> 橄榄球
            </label>
          </div> */}
        </div>
        <div className='form-group'>
          <label>所属学院</label>
          <select
            name='subject'
            value={studentForm.subject}
            onChange={e => {
              onFormChange(e)
            }}
            className='form-control'
          >
            <option value='大前端'>大前端</option>
            <option value='Java'>Java</option>
            <option value='python'>python</option>
          </select>
        </div>
        <button
          onClick={addStudentInfo}
          type='submit'
          className='btn btn-default'
        >
          添加
        </button>
      </form>
    </div>
  )
}

export default StudentInfoForm
